<template>
  <div>
    <n-spin :show="loading" description="请稍候...">
      <div>
        <n-grid x-gap="14" :cols="2">
          <n-gi>
            <n-card :bordered="false" title="基本信息">
              <div class="member-info">
                <div class="info">
                  <div class="data-item">
                    <span>员工姓名：</span>
                    <span style="margin-right: 5px">{{ data.name }}</span>
                    <a href="javascript:void(0);" @click="handleEditBase('name', data)">
                      <n-icon size="16" color="#105CFB">
                        <PencilSharp />
                      </n-icon>
                    </a>
                  </div>
                  <div class="data-item">
                    <span>员工部门：</span>
                    <span style="margin-right: 5px">{{ data.department }}</span>
                    <a href="javascript:void(0);" @click="handleEditBase('department', data)">
                      <n-icon size="16" color="#105CFB">
                        <PencilSharp />
                      </n-icon>
                    </a>
                  </div>
                  <div class="data-item">
                    <span>手机号：</span>
                    <span style="margin-right: 5px">{{ data.phone }}</span>
                    <a href="javascript:void(0);" @click="handleEditBase('phone', data)">
                      <n-icon size="16" color="#105CFB">
                        <PencilSharp />
                      </n-icon>
                    </a>
                  </div>
                  <div class="data-item">
                    <span>邮箱：</span>
                    <span style="margin-right: 5px">{{ data.email }}</span>
                    <a href="javascript:void(0);" @click="handleEditBase('email', data)">
                      <n-icon size="16" color="#105CFB">
                        <PencilSharp />
                      </n-icon>
                    </a>
                  </div>
                  <div class="data-item">
                    <span>返佣比例：</span>
                    <span style="margin-right: 5px">{{ data.rate }} <span class="c999">%</span></span>
                    <a href="javascript:void(0);" @click="handleEditBase('rate', data)">
                      <n-icon size="16" color="#105CFB">
                        <PencilSharp />
                      </n-icon>
                    </a>
                  </div>
                  <div class="data-item">
                    <span>最低可提现额：</span>
                    <span style="margin-right: 5px">{{ data.minWithdrawalAmount }} <span class="c999">JPY</span></span>
                    <a href="javascript:void(0);" @click="handleEditBase('minWithdrawalAmount', data)">
                      <n-icon size="16" color="#105CFB">
                        <PencilSharp />
                      </n-icon>
                    </a>
                  </div>
                  <div class="data-item">
                    <span>提现手续费：</span>
                    <span style="margin-right: 5px">{{ data.serviceCharge }} <span class="c999">%</span></span>
                    <a href="javascript:void(0);" @click="handleEditBase('serviceCharge', data)">
                      <n-icon size="16" color="#105CFB">
                        <PencilSharp />
                      </n-icon>
                    </a>
                  </div>
                  <div class="data-item">
                    <span>预计提现时间周期：</span>
                    <span style="margin-right: 5px">{{ data.afterDay }} <span class="c999">天</span></span>
                    <a href="javascript:void(0);" @click="handleEditBase('afterDay', data)">
                      <n-icon size="16" color="#105CFB">
                        <PencilSharp />
                      </n-icon>
                    </a>
                  </div>
                  <div class="data-item">
                    <span>绑定会员：</span>
                    <template v-if="data.pmsMemberId > 0">
                      <span style="margin-right: 5px">{{ data.pmsMemberFullName }}</span>
                      <!--                      <a href="javascript:void(0);" @click="handleEditBase('pmsMemberId', data)">-->
                      <!--                        <n-icon size="16" color="#105CFB">-->
                      <!--                          <PencilSharp />-->
                      <!--                        </n-icon>-->
                      <!--                      </a>-->
                    </template>
                    <!--                    <a href="javascript:void(0);" v-else>绑定</a>-->
                    <span style="margin-right: 5px" v-else>--</span>
                  </div>
                  <div class="data-item">
                    <span>状态：</span>
                    <n-radio-group v-model:value="data.status" @update:value="handleStatusChange">
                      <n-radio-button
                        v-for="status in options.sys_normal_disable"
                        :key="status.value"
                        :value="status.value"
                        :label="status.label"
                      />
                    </n-radio-group>
                  </div>
                </div>
              </div>
            </n-card>
          </n-gi>
          <n-gi>
            <n-card :bordered="false"  title="账户信息">
              <div class="member-info">
                <div class="info">
                  <div class="data-item">
                    <span>总余额：</span>
                    <span style="margin-right: 5px">{{ data.allBalance }} <span class="c999">JPY</span></span>
                  </div>
                  <div class="data-item">
                    <span>可提现余额：</span>
                    <span style="margin-right: 5px">{{ data.balance }} <span class="c999">JPY</span></span>
                  </div>
                  <div class="data-item"></div>
                  <div class="data-item"></div>
                  <div class="data-item"></div>
                  <div class="data-item"></div>
                  <div class="data-item"></div>
                  <div class="data-item"></div>
                  <div class="data-item"></div>
                  <div class="data-item"></div>
                </div>
              </div>
            </n-card>
          </n-gi>
        </n-grid>
      </div>
      <n-grid :cols="1">
        <n-gi>
          <n-card
            :bordered="false"
            class="proCard mt-4"
            size="small"
            :segmented="{ content: true }"
            title="结算订单"
          >
            <BasicTable  ref="actionRef" :columns="columns" :request="loadDataTable" :scroll-x="scrollX" :resizeHeightOffset="-10000">
            </BasicTable>
          </n-card>
        </n-gi>
      </n-grid>
    </n-spin>

    <EditBase ref="editBaseRef" @reloadInfo="getInfo" />
  </div>
</template>

<script lang="ts" setup>
import {computed, onMounted, ref, h} from 'vue';
import 'vue3-json-viewer/dist/index.css';
import { useRouter } from 'vue-router';
import { useMessage } from 'naive-ui';
import { View, Status } from '@/api/pmsStaff';
import { Dicts } from '@/api/dict/dict';
import { rebateList } from '@/api/pmsAppReservation';
import {BasicTable} from "@/components/Table";
import {Option, adaTableScrollX, getOptionLabel} from "@/utils/hotgo";
import {PencilSharp} from "@vicons/ionicons5";
import EditBase from "@/views/pmsStaff/edit_base.vue";

// 字典数据选项
const options = ref({
  sys_normal_disable: [] as Option[],
});
const message = useMessage();
const router = useRouter();
const params = router.currentRoute.value.params;
const loading = ref(false);
const data = ref({});
const editBaseRef = ref();

const getInfo = () => {
  loading.value = true;
  View(params)
    .then((res) => {
      data.value = res;
    })
    .finally(() => {
      loading.value = false;
    });
};

// 表格列
const columns = [
  {
    title: '订单号',
    key: 'orderSn',
    align: 'left',
    width: -1,
  },
  {
    title: '订单金额',
    key: 'orderAmount',
    align: 'left',
    width: -1,
    render: function (rowData){
      return h(
        'span',
        {
          bordered: false
        },
        [
          h(
            'span',
            {
              bordered: false
            },
            {
              default: () => rowData.orderAmount
            }
          ),
          h(
            'span',
            {
              class: 'c999',
              style: {
                marginLeft: '6px',
              },
            },
            {
              default: () => 'JPY'
            }
          )
        ]
      )
    }
  },
  {
    title: '退款金额',
    key: 'refundAmount',
    align: 'left',
    width: -1,
  },
  {
    title: '分佣比例',
    key: 'rebateRate',
    align: 'left',
    width: -1,
    render: function (rowData){
      return rowData.rebateRate + '%'
    }
  },
  {
    title: '结算金额',
    key: 'rebateAmount',
    align: 'left',
    width: -1,
  },
  {
    title: '结算状态',
    key: 'rebateStatus',
    align: 'left',
    width: -1,
    render: function (rowData){
      if(rowData.rebateStatus == 'WAIT'){
        return '结算中';
      }else if(rowData.rebateStatus == 'SUCCESS'){
        h(
          'span',
          {
            style: {
              color: 'green',
              bordered: false
            },
          },
          {
            default: () => '结算成功'
          }
        )
      }else{
        h(
          'span',
          {
            style: {
              color: 'red',
              bordered: false
            },
          },
          {
            default: () => '结算失败'
          }
        )
      }
    }
  },
];

// 加载表格数据
const loadDataTable = async (res) => {
  return await rebateList({ ...{
      fx_type: 'staff',
      fx_id: params.id
    }, ...res });
};

const scrollX = computed(() => {
  return adaTableScrollX(columns, 0);
});

// 编辑数据
function handleEditBase(type, value) {
  editBaseRef.value.openModal(data.value.id, type, value);
}

function handleStatusChange(e) {
  Status({ id: data.value.id, status: e }).then((_res) => {
    message.success('设为' + getOptionLabel(options.value.sys_normal_disable, e) + '成功');
    setTimeout(() => {
      getInfo();
    });
  });
}

// 加载字典数据选项
function loadOptions() {
  Dicts({
    types: ['sys_normal_disable'],
  }).then((res) => {
    options.value = res;
  });
}

onMounted(() => {
  if (!params.id) {
    message.error('员工ID不正确，请检查！');
    return;
  }
  loadOptions();
  getInfo();
});
</script>

<style lang="less" scoped>
::v-deep(.json-width) {
  width: 100%;
  min-width: 3.125rem;
}
.member-info{
  display: flex;
  .headimg{
    margin-right: 15px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .info{
    flex: 1;
    width: 0;
    display: flex;
    flex-wrap: wrap;
    .data-item{
      width: 50%;
      height: 35px;
      padding-right: 10px;
      box-sizing: border-box;
      line-height: 30px;
      color: #333;
    }
  }

}
</style>


